<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="factory-information" ng-if="factoryInformationController.copyOriginFactory">
  <!-- Name -->
  <che-label-container che-label-name="Name">
    <div layout="column" class="factory-information-input">
      <ng-form name="factoryInformationForm">
        <che-input che-form="factoryInformationForm"
                   che-name="name"
                   che-place-holder="Name of the factory"
                   aria-label="Name of the factory"
                   ng-model="factoryInformationController.copyOriginFactory.name"
                   ng-change="factoryInformationController.updateName($value, factoryInformationForm)"
                   ng-trim
                   ng-minlength="3"
                   ng-maxlength="20"
                   ng-pattern="/^[ A-Za-z0-9_\-\.]+$/"
                   unique-factory-name="factoryInformationController.origName">
          <div ng-message="required">A name is required.</div>
          <div ng-message="pattern">Factory name may contain digits, latin letters, spaces, _ , . , - and should start
            only
            with digits, latin letters or underscores
          </div>
          <div ng-message="minlength">The name has to be more than 3 characters long.</div>
          <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
          <div ng-message="uniqueFactoryName">This factory name is already used.</div>
        </che-input>
      </ng-form>
    </div>
  </che-label-container>

  <!-- URL -->
  <che-label-container che-label-name="URL">
    <che-text-info ng-show="factoryInformationController.getFactoryNamedUrl()"
                   che-text="factoryInformationController.getFactoryNamedUrl()"
                   che-href="factoryInformationController.getFactoryNamedUrl()"
                   che-copy-clipboard="true"
                   class="factory-information-panel-item"></che-text-info>
    <che-text-info che-text="factoryInformationController.getFactoryIdUrl()"
                   che-href="factoryInformationController.getFactoryIdUrl()"
                   che-copy-clipboard="true"
                   class="factory-information-panel-item"></che-text-info>
  </che-label-container>

  <!-- Creation Date -->
  <che-label-container che-label-name="Creation Date">
    <che-text-info
            che-text="factoryInformationController.factory.creator.created | amDateFormat:'Do MMMM YYYY'">
    </che-text-info>
  </che-label-container>

  <!--Stack-->
  <che-label-container che-label-name="Configure Stack"
                       che-label-description="Stacks are recipes or images used to define your environment runtime. Workspace environments are used to build and run your project.">
    <md-radio-group ng-model="factoryInformationController.stackRecipeMode">
      <md-radio-button value="current-recipe">Use current recipe</md-radio-button>
      <div ng-if="factoryInformationController.stackRecipeMode === 'current-recipe'">
        <div ng-if="factoryInformationController.getRecipe()">
          {{factoryInformationController.getRecipe()}}
        </div>
        <div ng-if="!factoryInformationController.getRecipe()">
          none
        </div>
      </div>
      <md-radio-button value="from-stack">Configure recipe from a stack</md-radio-button>
    </md-radio-group>
    <div ng-if="factoryInformationController.stackRecipeMode === 'from-stack'">
      <workspace-select-stack workspace-stack-on-change="factoryInformationController.onWorkspaceStackChanged(config, stackId)"
                              workspace-name="factoryInformationController.workspaceName"
                              environment-name="factoryInformationController.environmentName"
                              workspace-imported-recipe="factoryInformationController.workspaceImportedRecipe"></workspace-select-stack>
      <che-button-primary che-button-title="Save" class="save-stack-button"
                          ng-click="factoryInformationController.saveStack()"></che-button-primary>
    </div>
  </che-label-container>

  <che-label-container che-label-name="Workspace"
                       che-label-description="A workspace contains projects and runtime environments.">
    <!--Workspace name-->
    <che-label-container che-label-name="Name">
      <ng-form name="factoryInformationForm">
        <div class="factory-information-input">
          <che-input che-form="factoryInformationForm"
                     che-name="name"
                     che-place-holder="Name of the workspace"
                     aria-label="Name of the workspace"
                     ng-model="factoryInformationController.copyOriginFactory.workspace.name"
                     ng-change="factoryInformationController.updateFactory(factoryInformationForm)"
                     required
                     ng-minlength="3"
                     ng-maxlength="20"
                     ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
            <div ng-message="required">A name is required.</div>
            <div ng-message="pattern">Workspace name may contain digits, latin letters, _ , . , - and should start
              only with digits, latin
              letters or underscores
            </div>
            <div ng-message="minlength">The name has to be more than 3 characters long.</div>
            <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
          </che-input>
        </div>
      </ng-form>
    </che-label-container>
    <!--Workspace RAM-->
    <che-label-container che-label-name="RAM">
      <ng-form name="factoryInformationForm">
        <div data-ng-repeat="(environmentKey, environmentValue) in factoryInformationController.copyOriginFactory.workspace.environments">
          <span ng-if="factoryInformationController.getObjectKeys(factoryInformationController.copyOriginFactory.workspace.environments).length > 1"
                class="workspace-environment-name">ENVIRONMENT: {{environmentKey}}</span>

          <div>
            <div data-ng-repeat="(machineKey, machineValue) in environmentValue.machines">
              <div class="workspace-machine" ng-if="machineValue.attributes && machineValue.attributes.memoryLimitBytes">
                <span ng-if="factoryInformationController.getObjectKeys(environmentValue.machines).length > 1">MACHINE: {{machineKey}}</span>
                <che-workspace-ram-allocation-slider
                        ng-model="machineValue.attributes.memoryLimitBytes"
                        che-on-change="factoryInformationController.updateFactory(factoryInformationForm)"></che-workspace-ram-allocation-slider>
              </div>
            </div>
          </div>
        </div>
      </ng-form>
    </che-label-container>
  </che-label-container>

  <!-- Configure commands -->
  <che-label-container che-label-name="Configure Commands"
                       che-label-description="Commands are processes that are invoked by users from a dropdown in the IDE.">
    <cdvy-factory-command cdvy-factory-object="factoryInformationController.copyOriginFactory"
                          cdvy-on-change="factoryInformationController.updateFactory(factoryInformationForm)"></cdvy-factory-command>
  </che-label-container>

  <!-- Configure actions -->
  <che-label-container che-label-name="Configure Actions"
                       che-label-description="Tell the IDE to perform additional actions after the workspace is loaded.">
    <!-- almost no action is possible at this lifecycle
    <cdvy-factory-action-box cdvy-lifecycle="onAppLoaded"
                             cdvy-action-title="Actions executed after IDE is loaded"
                             cdvy-callback-controller="factoryInformationController"
                             cdvy-factory-object="factoryInformationController.factoryObject"></cdvy-factory-action-box>
    -->
    <cdvy-factory-action-box cdvy-lifecycle="onProjectsLoaded"
                             cdvy-callback-controller="factoryInformationController"
                             cdvy-factory-object="factoryInformationController.copyOriginFactory"
                             cdvy-on-change="factoryInformationController.updateFactory(factoryInformationForm)"></cdvy-factory-action-box>
  </che-label-container>

  <!-- Configuration -->
  <che-label-container che-label-name="Configuration"
                       che-label-description="JSON definition of the factory."
                       ng-class="{ 'disabled-state': !factoryInformationController.factoryContent }">
    <div class="factory-configuration-panel">
      <md-content layout="column" layout-fill>
        <div class="json-editor" ng-if="factoryInformationController.factoryContent !== null">
          <textarea ui-codemirror="factoryInformationController.editorOptions"
                    ng-model="factoryInformationController.factoryContent"
                    aria-label="Factory configuration editor"
                    ng-focus="factoryInformationController.factoryEditorOnFocus()"></textarea>
        </div>
      </md-content>
      <div layout="row" flex>
        <div>
          <a href="/docs/factory/getting-started/index.html" target="_blank">Factory configuration docs</a>
        </div>
        <div layout="row" layout-align="end start" flex>
          <div>
            <che-button-default che-button-title="Reload"
                                ng-click="factoryInformationController.factoryEditorReset()"></che-button-default>
          </div>
          <div class="factory-information-update-button">
            <che-button-primary che-button-title="Update"
                                ng-disabled="factoryInformationController.factoryContent === factoryInformationController.$filter('json')(factoryInformationController.copyOriginFactory, 2);"
                                ng-click="factoryInformationController.updateFactoryContent()"></che-button-primary>
          </div>
        </div>
      </div>
    </div>
  </che-label-container>

  <!-- Delete button -->
  <che-label-container class="factory-delete-label"
                       che-label-name="Delete Factory"
                       che-label-description="This is irreversible.">
    <che-button-danger che-button-title="Delete"
                       ng-click="factoryInformationController.deleteFactory()"></che-button-danger>
  </che-label-container>

</div>
